<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>蜗牛书城后台管理系统</title>
    <script type="text/javascript" th:src="@{/asserts/scripts/vue2.7.14.js}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style rel="stylesheet" th:href="@{/asserts/styles/global.css}"></style>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        img {
            width: 30px;
            height: 30px;
        }
        .toggle-button {
            background-color: #373d48;
            font-size: 10px;
            text-align: center;
            color: #fff;
            letter-spacing: 0.2em;
            cursor: pointer;
        }

        .el-header {
            background-color: #373d41;
            display: flex;
            justify-content: space-between;
            padding-left: 0;
            align-items: center;
            color: #fff;
            font-size: 22px;
        }
        .el-header > div {
            display: flex;
            align-items: center;
        }

        .el-header > div span {
            margin-left: 14px;
        }

        .el-aside {
            background-color: #333744;
        }
        .el-aside .el-menu {
            border-right: 0;
        }
        .el-main {
            background-color: #eaedf1;
        }
        .home-container {
            height: 100%;
        }
        #app{
            height: 700px;
        }

    </style>
</head>
<body>
    <div id="app">
        <el-container class="home-container">
            <el-header>
                <div>
                    <img th:src="@{/asserts/imgs/caishen.jpg}" />
                    <span>图书后台管理系统</span>
                </div>
                <el-button type="info" @click="logout">退出</el-button>
            </el-header>

            <el-container>
                <el-aside :width="isCollapse ? '64px' : '200px'">
                    <div class="toggle-button" @click="toggleClapse">||||</div>

                    <el-menu
                            background-color="#333744"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            unique-opened
                            :collapse="isCollapse"
                            :collapse-transition="false"
                    >
                        <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
                            <template slot="title">
                                <i class="el-icon-s-opportunity"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item
                                  v-for="subMenu in item.children"
                                  :key="subMenu.id"
                            >
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <a :href="subMenu.url" style="text-decoration: none; color: #ffffff" target="myframe" >{{subMenu.name}}</a>
                                </template>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>

                <el-main>
                    <iframe style="border-width: 0;height: 100%;width: 100%" name="myframe" th:src="@{/welcome.html}"></iframe>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <script>
        let vueApp = new Vue({
            el:"#app",
            data:{
                menuList: [
                    {
                        id: 1,
                        name: "用户管理",
                        children: [{ id: 101, name: "用户列表", url: "user.html" }]
                    },
                    {
                        id: 2,
                        name: "图书管理",
                        children: [
                            { id: 201, name: "分类列表", url: "catagory.html" },
                            { id: 202, name: "图书列表", url: "book.html" }
                        ]
                    },
                    {
                        id: 3,
                        name: "订单管理",
                        children: [{id: 301, name: "订单列表", url: "order.html"}]
                    }
                ],
                isCollapse: false,
            },
            methods:{
                toggleClapse() {
                    this.isCollapse = !this.isCollapse;
                },
                logout() {

                },
                //查询所有菜单
                loadMenus(){
                    let url = "./permission/menuList";
                    axios.get(url).then((res)=>{
                        if (res.data.code == 200) {
                            this.$message({   //alert("登录成功");
                                type:'success', //提示类型  success 成功 绿色信息
                                message:res.data.message , //提示信息
                                duration:1000  // 1秒之后 自动关闭
                            })
                            this.menuList = res.data.data ;
                        }else {
                            this.$message({   //alert("登录成功");
                                type:'error', //提示类型  success 成功 绿色信息
                                message:res.data.message , //提示信息
                                duration:1000  // 1秒之后 自动关闭
                            })
                        }
                    })
                }
            },
            created(){
                this.loadMenus();
            }
        });
    </script>
</body>
</html>